<template>
    <view >
      <cu-custom bgColor="bg-gradual-blue" :isBack="true">
        <block slot="backText">返回</block>
        <block slot="content">修改信息</block>
      </cu-custom>
      <view class="container" v-if="showButton">
        <view class="example">
          <button type="primary" @click="submit">相机</button>
          <button type="primary" @click="submit1">自定义相机</button>
          <button type="primary" @click="submit2">签名</button>
        </view>
      </view>
  
      <!-- 条件渲染自定义相机组件 -->
      <take-photo v-if="showCamera" @close="closeCamera" />
    </view>
  </template>
  
  <script>
  import TakePhoto from '@/components/takePhoto/takePhoto.vue'
  
  export default {
  data() {
    return {
      showCamera: false,  // 控制全屏相机组件的显示状态
      showButton: true  // 控制按钮的显示状态
    }
  },
  components: {
    TakePhoto
  },
  methods: {
    submit() {
      // 点击按钮时显示全屏相机组件，并隐藏按钮
      this.showCamera = true
      this.showButton = false
    },
    submit1() {
        this.$tab.navigateTo('/pages/work/takePhoto/takePhoto')
    },
    submit2() {
        this.$tab.navigateTo('/pages/work/TnCustom/TnCustom')
    },
    closeCamera() {
      // 关闭全屏相机组件时将 showCamera 设置为 false，并显示按钮
      this.showCamera = false
      this.showButton = true
    }
  }
}
  </script>
  
<style lang="scss">
page {
    background-color: #ffffff;
}

.example {
    padding: 15px;
    background-color: #fff;
}

.segmented-control {
    margin-bottom: 15px;
}

.button-group {
    margin-top: 15px;
    display: flex;
    justify-content: space-around;
}

.form-item {
    display: flex;
    align-items: center;
    flex: 1;
}

.button {
    display: flex;
    align-items: center;
    height: 35px;
    line-height: 35px;
    margin-left: 10px;
}
</style>